<template>
  <button @click="funcSwitch(id)" class="ButtonButton">{{ title }}</button>
</template>

<script>
export default {
  props: ['title','id'],
  methods:{
    funcSwitch(n){
    this.$emit('funcSwitch',n)
    }
  }
}
</script>
<style>
.ButtonButton {
  background-color: #4285F4;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 24px 0 24px ;
  width: 240px;
  height: 60px;
  vertical-align: middle;
  border: none;
  font-size: 24px;
  transition: 0.4s ease;
  vertical-align: middle;
}

.ButtonButton:hover {
  background-color: #fff;
  color: #4285F4;
  font-size: 30px;
  width: 260px;
  height: 80px;
  border-bottom: solid 5px #4285F4;
    border-top: solid 5px #4285F4;
  /* margin: 0 7px 0 7px; */
  margin-left: 14px;
  margin-right: 14px;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.377);
}
</style>